<template>
  <div>
    <el-row>
      <el-col :span="4" style="position: fixed">
        <h1>lovo商城</h1>
        <el-menu
            default-active="2"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Document/>
              </el-icon>
              <span>商城前端</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="$router.push('product')">购买商品</el-menu-item>
              <el-menu-item index="1-2" @click="$router.push('shopping')">购物车</el-menu-item>
              <el-menu-item index="1-2" @click="$router.push('dingDan')">个人订单</el-menu-item>
              <el-menu-item index="1-1" @click="$router.push('address')">客户收货地址维护</el-menu-item>
              <el-menu-item index="1-2" @click="$router.push('zhuCe')">客户注册</el-menu-item>
              <el-menu-item index="1-1" @click="$router.push('yuCunKuan')">客户预存款</el-menu-item>
              <el-menu-item index="1-2" @click="$router.push('tuiHuo')">退货</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


        </el-menu>
      </el-col>
      <el-col :span="20" style="margin-left: 230px">
        <div class="div1">
          <div>客服电话： 028-0225-2256</div>
          <div>
            <a href="#">登陆 |</a>
            <a href="#"> 注册 |</a>
            <a href="#"> 我的订单 |</a>
            <a href="#"> 连系我们</a>
          </div>
        </div>
        <div class="div2">
          <div><div class="heart"></div><h1 style="display: block;"><span class="span">LOVO</span></h1></div>
          <div style="line-height: 100px">
            <div style="display:flex;padding-top: 40px">
              <el-input
                  placeholder="请输入内容"
                  v-model="input"
                  clearable>
              </el-input>
              <el-button type="primary">搜索</el-button>
            </div>
          </div>
          <div style="line-height: 100px">
            <el-button type="primary" @click="$router.push('shopping')">我的购物车</el-button>
          </div>
        </div>
        <div class="div3">
          <a href="#" class="a">办公管理</a>|
          <a href="#" class="a">文焕宣传</a>|
          <a href="#" class="a">会展活动</a>|
          <a href="#" class="a">展示标识</a>|
          <a href="#" class="a">个性装饰</a>|
          <a href="#" class="a">logo设计</a>|
          <a href="#" class="a">专业下单</a>
        </div>
        <div class="div4">
          <div class="lunbo">
            <img src="../../img/2.jpg" alt="">
            <img src="../../img/3.jpg" alt="">
            <img src="../../img/4.jpg" alt="">
          </div>
        </div>
        <div class="div5">
          <h1>热门分类</h1>
          <div style="display: flex;justify-content: space-evenly">
            <a href="#">
              <div>
                <img src="../../img/1.jpg">
                <p>办公管理</p>
                <p>种类多，平类其</p>
              </div>
            </a>
            <a href="#">
              <div>
                <img src="../../img/1.jpg">
                <p>办公管理</p>
                <p>种类多，平类其</p>
              </div>
            </a>
            <a href="#">
              <div>
                <img src="../../img/1.jpg">
                <p>办公管理</p>
                <p>种类多，平类其</p>
              </div>
            </a>
            <a href="#">
              <div>
                <img src="../../img/1.jpg">
                <p>办公管理</p>
                <p>种类多，平类其</p>
              </div>
            </a>
          </div>
        </div>
        <footer>

          <p>关于lovo商城：<a href="../影院/影院.html">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../影院/影院.html">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../影院/影院.html">投资者关系</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友情链接：<a href="../影院/影院.html">美团网</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../影院/影院.html">格瓦拉</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../影院/影院.html">美团下载</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../影院/影院.html">欢喜首映</a></p>
          <p>商务合作邮箱：v@maoyan.com 客服电话：10105335 违法和不良信息/设未成年人有害信息举报电话：4006018900</p>
          <p>用户举报/设未成年人有害信息举报邮箱：toushujubao@meituan.com舞弊线索举报邮箱：wubijubao@maoyan.com</p>
          <p>中华人民共和过增值电信业务经营许可证 京B2-201903350 | 营业性演出许可证 京演（机构）（2019）4094号</p>
          <p>广播电视节目制作经营许可证（京）字第08478号 | 网络文化经营许可证 京网文（2019）3837-369</p>
          <p>lovo商城用户服务协议 | lovo商城平台交易规则总则 | 隐私政策</p>
          <p>京公网安备 11010102003232号 | 京ICP备16022489号-1</p>
          <p>北京lovo商城文化传媒有限公司</p>
          <p></p>
          <div class="footer">
            <i class="footer-icon1"></i>
            <i class="footer-icon2"></i>
            <i class="footer-icon3"></i>
          </div>
        </footer>
      </el-col>
    </el-row>

  </div>


</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      input: '',
    }
  },
  methods: {}
}
</script>

<style scoped>
.div5{
  width: 1200px;
  margin: auto;
}
.div5 img{
  width: 260px;
  height: 260px;
}
.div5 p{
  text-align: center;
}
.div5 a{
  text-decoration: none;
  color:pink;
}
.div5 a:hover{
  transform: scale(1.1);
}
.div3{
  display: flex;
  justify-content: space-around;
  width: 800px;
  margin-left: 30px;
}
.div3 a{
  text-decoration: none;
  color: black;
}
.div1 {
  margin: 15px 0 0 0;
  display: flex;
  justify-content: space-around;
  width: 1350px;
  background-color: red;
  color: white;
  position: fixed;
  z-index: 1;
}

.div1 a {
  color: white;
  text-decoration: none;
}

.div2 {
  display: flex;
  justify-content: space-around;
  line-height: 60px;
  margin-top: 20px;
}

.span:hover {
  background-color: red;
}

.a:before {
  content: "";
  width: 0;
  bottom: 0;
  left: 50%;
  border-bottom: 2px solid pink;
  position: absolute;
  transition: all linear .5s;
  /*display: none;*/
}
.a{
  color: black;
  align-items: center;
}


.a:hover {
  color: pink;
}
.lunbo {
  width: 100%;
  height: 500px;
  position: relative;
  margin-top: 40px ;
}

.lunbo>img {
  width: 100%;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
}

.lunbo>img:nth-child(1) {
  z-index: -3;
  animation: lunbo1 8s infinite;
}

.lunbo>img:nth-child(2) {
  z-index: -2;
  animation: lunbo2 8s infinite;
}

.lunbo>img:nth-child(3) {
  z-index: -1;
  animation: lunbo3 8s infinite;
}

/* 第一张图的动画 */
@keyframes lunbo1 {

  0%,
  25% {
    opacity: 1;
  }

  33%,
  91% {
    opacity: 0;
  }
}

@keyframes lunbo2 {

  0%,
  25% {
    opacity: 0;
  }

  33%,
  58% {
    opacity: 1;
  }

  66%,
  91% {
    opacity: 0;
  }
}

@keyframes lunbo3 {

  0%,
  58% {
    opacity: 0;
  }

  66%,
  91% {
    opacity: 1;
  }
}
.heart{
  width: 20px;
  height: 20px;
  background: red;
  transform: rotate(45deg) scale(.5);
  animation-name: hd;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  position: absolute;
  top: 62px;
  left: 348px;
}
.heart::before{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  transform: translateX(-10px);
}
.heart::after{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  transform: translateY(-10px);
}
@keyframes hd {
  25%{
    transform: rotate(45deg) scale(1);
  }
  50%{
    transform: rotate(45deg) scale(.5);
  }
  75%{
    transform: rotate(45deg) scale(1);
  }
  to{
    transform: rotate(45deg) scale(.5);
  }
}
footer{
  height: 375px;
  padding-top: 20px;
  border-top: 1px solid black;
  margin-top: 20px;
}
footer a{
  color: #f04436;
}
footer p{
  text-align:center;
  font-size: 12px;
  color: deeppink;
  line-height: 20px;
}
</style>